<template>
	<view class="">1
		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="简介">
				<u-input v-model="form.intro" />
			</u-form-item>
			<u-form-item label="预约时间">
				<picker @change="cha" :range="list" range-key="label">
					<view class="uni-input" v-if="index">{{data}}{{list[index].label}}</view>
					<view class="" v-else>请选择</view>
				</picker>
			</u-form-item>
			<u-form-item label="水果">
				<u-checkbox-group>
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index"
						:name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="味道">
				<u-radio-group v-model="radio">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="开关">
				<u-switch slot="right" v-model="switchVal"></u-switch>
			</u-form-item>
			<u-form-item label="提交">
				<u-button @click="sub">预约</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		methods: {
			cha(val) {
				console.log(val)
				let date = new Date()
				this.data = date.toLocaleDateString().split('/').join('-')
				this.index = val.detail.value
			},
			sub() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			getSpecial() {
				console.log(123)
				let self = this
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(()=>{
					console.log(self,'12')
				},1000)
				
			},
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
			this.getSpecial()
		},
		created() {
			uni.getUserInfo({
				success: function(res) {
					console.log(res)
				}
			})
			uni.login({
				success(res) {
					console.log(res)
				}
			})
		},
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: ''
				},
				list: [{
						value: '1',
						label: '上午'
					},
					{
						value: '0',
						label: '下午'
					}
				],
				index: '',
				data: '',
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radio: '',
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				},
				switchVal: false
			};
		}
	};
</script>

<style lang="scss">

</style>
